<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="header" style=" position: fixed,top:0">
			<!-- 定位城市 -->
			<view class="addr" @tap="showModal">
				<view class="cuIcon-locationfill text-red"></view>
				{{city.name}}
			</view>
			<!-- mSearch组件 如果使用原样式，删除组件元素-->
			<mSearch  class="mSearch-input-box"  :mode="1" button="inside" placeholder="默认关键字"  @search="serach" @input="inputChange" @confirm="serach" v-model="queryParams.query" style="flex:1"></mSearch>
			<!-- 搜索框 -->
			<!-- <view class="input-box">
				<input placeholder="默认关键字" confirm-type="search" @confirm="serach" v-model="queryParams.query" @input="inputChange"
				 placeholder-style="color:#c0c0c0;" />
				<view class="icon search"></view>
			</view> -->

		</view>
		<view class="search-keyword">
			<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
				<block v-for="(row,index) in keywordList" :key="index">
					<view class="keyword-entry" hover-class="keyword-entry-tap" @tap.stop="doSearch(keywordList[index].keyword)">
						<view class="keyword-text">
							<rich-text :nodes="row.htmlStr"></rich-text>
						</view>
						<view class="keyword-img">
							<image src="/static/img/back.png"></image>
						</view>
					</view>
				</block>

			</scroll-view>
		</view>
		<sl-filter :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor"
		 :menuList="menuList" @result="result"></sl-filter>
		<view class="list">
			<navigator v-for="(bulding,index) in expertList" :key="bulding.id" :url="'/pages/new/detail/detail?id='+bulding.id">
				<bulding-item :options="bulding"></bulding-item>
			</navigator>

		</view>

		<view class="cu-load load-modal" v-if="isLoading">
			<view class="cuIcon-emojifill text-orange"></view>
			<view class="gray-text">{{loadMoreDefalutText}}</view>
		</view>


		<uni-drawer :visible="showLeft" mode="left" @close="closeDrawer">

			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
				<view class="cu-item arrow" v-for="(item,index) in citys" :key="index">
					<button @tap="tabSelect" :data-city="item" class="content">
						<text class="text-grey">{{item.name}}</text>
					</button>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="hideModal">关闭</button>
			</view>
		</uni-drawer>
		<view class="cu-load" v-if="expertList.length==0">
			<view class="text-gray">——————暂无数据——————</view>
		</view>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import buldingItem from '@/pages/new/item.vue';
	import commentItem from '@/pages/comment/item.vue';
	import uniDrawer from '@/components/uni-drawer.vue';
	//引用mSearch组件，如不需要删除即可
	import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue';

	export default {
		components: {
			slFilter,
			buldingItem,
			commentItem,
			uniDrawer,
			mSearch
		},
		data() {
			return {
				imgRoot: this.$rootUrl,
				isLoading: false,
				showLeft: false,
				loadMoreText: '加载中...',
				loadMoreDefalutText: '努力加载中...',
				loadMoreNoLeftText: '没有更多了,请掉头行驶...',
				connectionFailText: '连接失败,请检查网络是否断开!',
				emptyText: '什么都没找到哟...',
				expertList: [],
				isShowKeywordList: false,
				keyword: "",
				keywordList: [],
				city: '',
				citys: [],
				isBuildingLeft: true,
				orderByName: false,
				queryParams: {
					query: '',
					channel: 'new',
					Area: '',
					HouseType: '',
					HousePrice: '',
					CityId: null,
					pageSize: 10,
					page: 1,
					Name:""
				},
				themeColor: '#D1372C',
				titleColor: '#666666',
				filterResult: '',
				buldings: [],
				menuList: [{
						'title': '区域',
						'key': 'Area',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
							'title': '区域',
							'value': ''
						}]
					},
					{
						'title': '价格',
						'key': 'HousePrice',
						'isSort': false,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
							'title': '不限',
							'value': ''
						}]
					},
					{
						'title': '业态',
						'key': 'HouseType',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
							'title': '业态',
							'value': ''
						}]
					}
				]

			}
		},
		onLoad() {
			var me = this;
			me.citys = getApp().globalData.citys;
			if (this.city.id != getApp().globalData.city.id) {
				this.city = getApp().globalData.city;
				this.queryParams.CityId = this.city.id;
			}
			me.loadBuildingList();
			me.loadSelectList();
		},
		onShow() {
			if (this.city.id != getApp().globalData.city.id) {
				this.city = getApp().globalData.city;
				this.queryParams.CityId = this.city.id;
				this.expertList = [],
					this.queryParams.page = 1;
				this.isBuildingLeft = true;
				this.loadSelectList();
				this.loadBuildingList();
			}

		},
		onShareAppMessage() {
			return {
				title: '选楼盘，查佣金，看房价'
			}
		},
		onPullDownRefresh() {
			this.refreshExpertList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.loadBuildingList();
		},
		methods: {
			closeDrawer(e) {
				this.showLeft = false
			},
			showModal(e) {
				this.showLeft = true;
			},
			hideModal() {
				this.showLeft = false;
			},
			tabSelect(e) {
				var selectCity = e.currentTarget.dataset.city;
				if (this.city.id != selectCity.id) {
					getApp().globalData.city = selectCity;
					this.city = selectCity;
					this.queryParams.CityId = selectCity.id;
					this.expertList = [],
						this.queryParams.page = 1;
					this.isBuildingLeft = true;
					this.loadSelectList();
					this.loadBuildingList();
					uni.setStorage({
						key:"city",
					    data:this.city
					});
				}
				this.showLeft = false;
			},
			result(val) {

				this.queryParams.HousePrice = val.HousePrice;
				this.queryParams.HouseType = val.HouseType;
				this.queryParams.Area = val.Area;
				this.expertList = [],
					this.queryParams.page = 1;
				this.isBuildingLeft = true;
				this.loadBuildingList();
			},

			serach() {
				this.expertList = [],
					this.queryParams.page = 1;
				this.isBuildingLeft = true;
				this.loadBuildingList();
			},
			// 重置所有选项，包括默认选项，并更新result
			resetAllSelect() {
				this.$refs.slFilter.resetAllSelect(function(result) {
					console.log('重置之后回调的result:' + JSON.stringify(result))
				})
			},
			// 重置选项为设置的默认值，并更新result
			resetSelectToDefault() {
				this.$refs.slFilter.resetSelectToDefault(function(result) {
					console.log('重置为默认值之后回调的result:' + JSON.stringify(result))
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/new/detail/detail'
				})
			},
			loadBuildingList() {
				var me = this;
				me.isShowKeywordList = false;
				if (!me.isBuildingLeft) {
					uni.showModal({
						content: '已经到底了!',
						showCancel: false
					});
					return;
				}
				this.isLoading = true;
				uni.request({
					url: me.$rootUrl + '/House/GetList',
					data: me.queryParams,
					method: 'GET',
					success(res) {
						me.isLoading = false;
						if (res.data.success) {
							res.data.items.forEach(n => me.expertList.push(n));

							if (me.expertList.length >= res.data.total) {
								me.isBuildingLeft = false;
								me.loadMoreText = me.loadMoreNoLeftText;
							} else {
								me.queryParams.page++;
							}
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			loadSelectList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Dic/GetNewDicList',
					data: {
						cityId: this.city.id
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.menuList[0].detailList = res.data.areas;
							me.menuList[1].detailList = res.data.prices;
							me.menuList[2].detailList = res.data.type;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			refreshExpertList() {
				this.expertList = [];
				this.loadMoreText = this.loadMoreDefalutText;
				this.isExpertLeft = true;
				this.queryParams.page = 1;
				this.loadExpertList();
			},

			//监听输入
			inputChange(event) {
				var me = this;
				//兼容引入组件时传入参数情况
				var keyword = event.detail ? event.detail.value : event;
				if (!keyword) {
					this.keywordList = [];
					this.isShowKeywordList = false;
					return;
				}
				this.isShowKeywordList = true;
				me.queryParams.Name=me.queryParams.query;
				//以下示例截取淘宝的关键字，请替换成你的接口
				uni.request({
					url: me.$rootUrl + '/House/FindNameListBy',
					data: me.queryParams,
					success: (res) => {
						this.keywordList = [];
						this.keywordList = this.drawCorrelativeKeyword(res.data.items, keyword);

					}
				});
			},
			//高亮关键字
			drawCorrelativeKeyword(keywords, keyword) {
				var len = keywords.length,
					keywordArr = [];
				for (var i = 0; i < len; i++) {
					var row = keywords[i];
					//定义高亮#9f9f9f
					var html = row.replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
					html = '<div>' + html + '</div>';
					var tmpObj = {
						keyword: row,
						htmlStr: html
					};
					keywordArr.push(tmpObj)
				}
				return keywordArr;
			},
			//顶置关键字
			setKeyword(index) {
				this.keyword = this.keywordList[index].keyword;
			},
			doSearch(keyword) {
				this.queryParams.query = keyword;
				this.isShowKeywordList = false;
				this.serach();
			},
		}
	}
</script>

<style lang="scss">
	.content {

		.header {
			width: 100%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			/* #ifdef H5 */

			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 10;
			background-color: #fff;

			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */

			.addr {
				width: 150upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 28upx;

				.icon {
					height: 60upx;
					margin-right: 5upx;
					display: flex;
					align-items: center;
					font-size: 42upx;
					color: #ffc50a;
				}
			}

			.input-box {
				width: 100%;
				height: 60upx;
				background-color: #f5f5f5;
				border-radius: 30upx;
				position: relative;
				display: flex;
				align-items: center;

				.icon {
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					width: 60upx;
					height: 60upx;
					font-size: 34upx;
					color: #c0c0c0;
				}

				input {
					padding-left: 28upx;
					height: 28upx;
					font-size: 28upx;
				}
			}

			.icon-btn {
				width: 120upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;

				.icon {
					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 42upx;
				}
			}
		}

		.list {
			margin-top: 48px;

		}
	}

	.text {
		margin-top: 50px;
		margin-left: 20px;
		width: 100%;
	}


	.search-box {
		width: 95%;
		background-color: rgb(242, 242, 242);
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0;
	}

	.search-box .mSearch-input-box {
		width: 100%;
	}

	.search-box .input-box {
		width: 85%;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .search-btn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 28upx;
		color: #fff;
		background: linear-gradient(to right, #ff9801, #ff570a);
		border-radius: 60upx;
	}

	.search-box .input-box>input {
		width: 100%;
		height: 60upx;
		font-size: 32upx;
		border: 0;
		border-radius: 60upx;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 3%;
		margin: 0;
		background-color: #ffffff;
	}

	.placeholder-class {
		color: #9e9e9e;
	}

	.search-keyword {
		width: 100%;
		background-color: rgb(242, 242, 242);
		position: fixed;
		z-index: 10000;
		top: 87upx;
	}

	.keyword-list-box {
		padding-top: 10upx;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.keyword-entry-tap {
		background-color: #eee;
	}

	.keyword-entry {
		width: 94%;
		height: 80upx;
		margin: 0 3%;
		font-size: 30upx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1upx #e7e7e7;
	}

	.keyword-entry image {
		width: 60upx;
		height: 60upx;
	}

	.keyword-entry .keyword-text,
	.keyword-entry .keyword-img {
		height: 80upx;
		display: flex;
		align-items: center;
	}

	.keyword-entry .keyword-text {
		width: 90%;
	}

	.keyword-entry .keyword-img {
		width: 10%;
		justify-content: center;
	}

	.keyword-box {
		height: calc(100vh - 110upx);
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.keyword-box .keyword-block {
		padding: 10upx 0;
	}

	.keyword-box .keyword-block .keyword-list-header {
		width: 94%;
		padding: 10upx 3%;
		font-size: 27upx;
		color: #333;
		display: flex;
		justify-content: space-between;
	}

	.keyword-box .keyword-block .keyword-list-header image {
		width: 40upx;
		height: 40upx;
	}

	.keyword-box .keyword-block .keyword {
		width: 94%;
		padding: 3px 3%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
	}

	.keyword-box .keyword-block .hide-hot-tis {
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #6b6b6b;
	}

	.keyword-box .keyword-block .keyword>view {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 60upx;
		padding: 0 20upx;
		margin: 10upx 20upx 10upx 0;
		height: 60upx;
		font-size: 28upx;
		background-color: rgb(242, 242, 242);
		color: #6b6b6b;
	}
</style>
